<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>添加角色</span>
      </div>
    </template>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      :label-position="right"
      status-icon
      style="width: 80%"
    >
      <el-form-item label="角色名称" prop="role_name">
        <el-input v-model="ruleForm.role_name" />
      </el-form-item>
      <el-form-item label="关联管理员" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="PC后台权限" prop="PC_Permission">
        <el-tree
          :data="PC_data"
          :props="PC_defaultProps"
          show-checkbox
          @check-change="PC_handleCheckChange"
          node-key="id"
          ref="PC_treeRef"
        />
      </el-form-item>
      <el-form-item label="移动端后台权限" prop="webapp_Permission">
        <el-tree
          :data="webapp_data"
          :props="webapp_defaultProps"
          show-checkbox
          @check-change="webapp_handleCheckChange"
          node-key="id"
          ref="webapp_treeRef"
        />
      </el-form-item>
      <el-form-item label="操作权限" prop="type">
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox label="导出数据" name="type" />
          <el-checkbox label="删除数据" name="type" />
          <el-checkbox label="分配客服" name="type" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >保存</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
import axios from "axios";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import { ElNotification } from "element-plus";

const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  name: "管理员_测试",
  role_name: "",
  PC_Permission: "",
  webapp_Permission: "",
  type: [],
});
// 表单验证
const rules = reactive<FormRules>({
  name: [
    {
      required: true,
      message: "请输入你的角色名称",
      trigger: "blur",
    },
    { min: 1, max: 15, message: "请输入 1 to 15字符", trigger: "blur" },
  ],
  role_name: [
    {
      required: true,
      message: "请填写关联管理员",
      trigger: "blur",
    },
    { min: 1, max: 15, message: "请输入 1 to 15字符", trigger: "blur" },
  ],
});

// PC端树状控件
const PC_treeRef = ref();
const PC_handleCheckChange = (
  PC_data: any,
  checked: boolean,
  indeterminate: boolean
) => {
  console.log(PC_data);
  console.log(PC_treeRef.value.getCheckedKeys(PC_data), 123);

  ruleForm.PC_Permission = PC_treeRef.value.getCheckedKeys(PC_data);
};

const PC_defaultProps = {
  children: "children",
  label: "label",
  disabled: "disabled",
};
// :default-checked-keys="[5]" //default-checked-keys：默认勾选的节点key数组   treeRef.value.getCheckedNodes(PC_data) 获取选中的key

const PC_data = [
  {
    id: 1,
    label: "用户",
    children: [
      {
        id: 9,
        label: "会员管理",
        children: [
          {
            id: 10,
            label: "企业会员",
          },
          {
            id: 11,
            label: "个人会员",
          },
          {
            id: 12,
            label: "无效会员",
          },
        ],
      },
      {
        id: 13,
        label: "个人简历管理",
        children: [
          {
            id: 14,
            label: "全部简历",
          },
          {
            id: 15,
            label: "简历回收站",
          },
          {
            id: 16,
            label: "投递简历记录",
          },
        ],
      },
      {
        id: 17,
        label: "企业信息管理",
        children: [
          {
            id: 18,
            label: "全部线索",
          },
          {
            id: 19,
            label: "我的线索",
          },
          {
            id: 20,
            label: "线索公海",
          },
          {
            id: 21,
            label: "全部客户",
          },
          {
            id: 22,
            label: "客户公海",
          },
          {
            id: 23,
            label: "CRM设置",
          },
          {
            id: 24,
            label: "CRM回收站",
          },
        ],
      },
      {
        id: 25,
        label: "职位信息管理",
        children: [
          {
            id: 26,
            label: "职位管理",
          },
          {
            id: 27,
            label: "面试邀请",
          },
          {
            id: 28,
            label: "简历下载",
          },
        ],
      },
    ],
  },
  {
    id: 3,
    label: "内容",
    children: [
      {
        id: 42,
        label: "广告管理",
        children: [
          {
            id: 43,
            label: "广告列表",
          },
          {
            id: 44,
            label: "广告位添加",
          },
          {
            id: 45,
            label: "广告位修改",
          },
          {
            id: 46,
            label: "广告列表添加",
          },
          {
            id: 47,
            label: "广告列表修改",
          },
        ],
      },
    ],
  },
  {
    id: 4,
    label: "系统设置",
    children: [
      {
        id: 66,
        label: "分类配置",
        children: [
          {
            id: 67,
            label: "地区分类",
          },
          {
            id: 68,
            label: "职位分类",
          },
          {
            id: 69,
            label: "专业分类",
          },
        ],
      },
      {
        id: 70,
        label: "系统管理员设置",
        children: [
          {
            id: 71,
            label: "管理员列表",
          },
          {
            id: 72,
            label: "管理员列表添加",
          },
          {
            id: 73,
            label: "管理员列表修改",
          },
          {
            id: 74,
            label: "角色权限设置",
          },
        ],
      },
    ],
  },
];

// PC端树状控件
const webapp_treeRef = ref();
const webapp_handleCheckChange = (
  PC_data: any,
  checked: boolean,
  indeterminate: boolean
) => {
  console.log(PC_data);
  console.log(webapp_treeRef.value.getCheckedKeys(PC_data), 123);

  ruleForm.webapp_Permission = webapp_treeRef.value.getCheckedKeys(PC_data);
};

const webapp_defaultProps = {
  children: "children",
  label: "label",
  disabled: "disabled",
};
const webapp_data = [
  {
    id: 1,
    label: "会员管理",
    children: [
      {
        id: 11,
        label: "企业会员",
      },
      {
        id: 12,
        label: "个人会员",
      },
      {
        id: 13,
        label: "照片/作品",
      },
      {
        id: 14,
        label: "企业管理",
      },
      {
        id: 15,
        label: "职位管理",
      },
      {
        id: 16,
        label: "企业风采",
      },
      {
        id: 17,
        label: "账号注销申请",
      },
    ],
  },
  {
    id: 2,
    label: "业务管理",
    children: [
      {
        id: 21,
        label: "(企业)套餐管理",
      },
      {
        id: 22,
        label: "(企业)订单管理",
      },
      {
        id: 23,
        label: "(企业)开通套餐",
      },
      {
        id: 24,
        label: "(企业)新增推广",
      },
      {
        id: 25,
        label: "(企业)积分增减",
      },
      {
        id: 26,
        label: "(个人)订单管理",
      },
      {
        id: 27,
        label: "(个人)新增推广",
      },
    ],
  },
  {
    id: 3,
    label: "系统工具",
    children: [
      {
        id: 31,
        label: "更新缓存",
      },
      {
        id: 32,
        label: "网站启停",
      },
      {
        id: 33,
        label: "暂停注册",
      },
    ],
  },
];

//确定按钮
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log(ruleForm);
      let res = await axios.post("http://localhost:5200/roles", {
        ...ruleForm,
      });
      formEl.resetFields();
      router.push("/sys/admin/role");
      if (res.status == 201) {
        ElNotification({
          title: "Success",
          message: `角色名称为${res.data.role_name}添加成功`,
          type: "success",
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
//取消按钮
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  router.push("/sys/admin/role");
};
</script>

<style></style>
